<template>
  <div class="login">
    <!-- 登录表单 -->
    <div :class="[ mainStore.isMobile ? 'login-card m' : 'login-card' ]">
      <div class="login-form">
        <div class="form-title font-16 flex align-center">
          <n-icon :component="LaptopOutline" />
          <span class="ml-5">欢迎登录后台管理系统</span>
        </div>
        <div class="padding-20">
          <n-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="loginFormRules"
            :show-label="false"
          >
            <n-form-item path="username">
              <n-input v-model:value="loginForm.username" placeholder="请输入用户名" clearable>
                <template #prefix>
                  <n-icon :component="PersonOutline" />
                </template>
              </n-input>
            </n-form-item>
            <n-form-item path="password">
              <n-input v-model:value="loginForm.password" type="password" show-password-on="click" placeholder="请输入密码" clearable>
                <template #prefix>
                  <n-icon :component="LockClosedOutline" />
                </template>
              </n-input>
            </n-form-item>
          </n-form>
          <n-button @click="loginFn" :loading="logging" class="full-width" type="primary">登录</n-button>
          <p class="login-top mt-10 font-12 text-center">如忘记账号或密码，请联系系统管理员</p>
        </div>
      </div>
    </div>
    <!-- 登录表单 -->

    <!-- footer s-->
    <div class="footer">
      <div class="refer font-14 flex align-center">
        <span>推荐使用</span>
        <img alt="google" src="../assets/img/google.png">
        <a href="https://www.google.com/chrome">谷歌浏览器</a>
      </div>
      <p class="copyright mt-10 font-12 text-center">© 2021 xxx版权所有</p>
    </div>
    <!-- footer s-->
  </div>
</template>

<script setup>
import { NIcon, useMessage } from 'naive-ui'
import { LaptopOutline, PersonOutline, LockClosedOutline } from '@vicons/ionicons5'
import { ref, reactive } from 'vue'
import { useMainStore } from '../store/main'
import { useUserStore } from '../store/user'
import { login } from '../api/modules/common'
import cookie from 'js-cookie'
import { authorization } from '../config/cacheKey'
import { useRoute, useRouter } from 'vue-router'

const message = useMessage()
const mainStore = useMainStore()
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()

// 登录表单
const loginForm = reactive({
  username: '',
  password: ''
})
// 登录表单ref
const loginFormRef = ref(null)
// 登录中
const logging = ref(false)

// 登录表单rules
const loginFormRules = {
  username: {
    required: true,
    trigger: 'blur',
    message: '用户名不能为空'
  },
  password: {
    required: true,
    trigger: 'blur',
    message: '密码不能为空'
  }
}

// 登录
function loginFn () {
  loginFormRef.value?.validate((errors) => {
    if (!errors) {
      logging.value = true
      login({
        mobile: loginForm.username,
        password: loginForm.password
      })
        .then(res => {
          cookie.set(authorization, res.data)
          userStore.setToken(res.data)
          if (route.query.redirect) {
            router.push(route.query.redirect)
          } else {
            router.push('/welcome')
          }
        })
        .catch(err => {
          message.error(err.message)
        })
        .finally(() => {
          logging.value = false
        })
    }
  })
}
</script>

<style scoped lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/img/login-bg.svg");
  background-size: cover;
  position: relative;
}

.login-card {
  width: 320px;
  position: absolute;
  right: 160px;
  top: 50%;
  transform: translateY(-60%);
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
}

.login-card.m {
  width: 90vw;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.login-form {
  .form-title {
    padding: 15px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border-color);
  }
  .login-top {
    color: #999999;
  }
}

.footer {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  .refer {
    img {
      margin: 0 4px;
      width: 20px;
      height: 20px;
    }
    a {
      color: #409eff;
      text-decoration: none;
    }
  }
  .copyright {
    opacity: 0.5;
  }
}
</style>
